<template>
  <div>
    <table width="100%" align="center">
      <template v-for="(comment, index) in pageInfo.list">
        <tr :key="comment.cid">
          <td>留言人：</td>
          <td>{{ comment.cauthor }}</td>
          <td>IP：</td>
          <td>{{comment.cip}}</td>
          <td>留言时间：</td>
          <td>{{ comment.cdate }}</td>
        </tr>
        <tr :key="index">
          <td colspan="6" v-html="comment.ccontent"></td>
        </tr>
        <tr :key="index + 10">
          <td colspan="6"><hr /></td>
        </tr>
      </template>
    </table>
    <p v-if="pageInfo.total > 0" class="pagenav">
      <a href="" @click.prevent="nextPage('home')">首页</a>
      <a href="" @click.prevent="nextPage('prev')">上一页</a>
      <span>{{ pageInfo.pageNum }}/{{ pageInfo.pages }}</span>
      <a href="" @click.prevent="nextPage('next')">下一页</a>
      <a href="" @click.prevent="nextPage('end')">末页</a>
    </p>
    <p v-else><strong>暂无评论</strong></p>
  </div>
</template>

<script>
export default {
  name: "comment-list",
  props: ["nid"],
  data() {
    return {
      pageInfo: {},
      pageNum:1,
      pageSize:2
    };
  },
  watch: {
    nid: function () {
      this.selectComment(this.pageNum, this.pageSize);
    },
  },
  created(){
    this.$bus.$on('commentListRefresh',()=>{
      console.log('执行刷新')
      this.selectComment(1, this.pageSize);
    })
  },
  mounted() {
    this.selectComment(this.pageNum, this.pageSize);
  },
  methods: {
    selectComment(pageNum, pageSize) {
      this.$axios({
        url: "/api/commentByPage",
        params: {
          pageNum,
          pageSize,
          nid: this.nid,
        },
      }).then((rs) => {
        this.pageInfo = rs.data.data;
      });
    },
    nextPage(key) {
      let pageNum = 1;
      switch (key) {
        case "prev":
          if (this.pageInfo.hasPreviousPage) {
            pageNum = this.pageInfo.prePage;
          }
          break;
        case "next":
          if (this.pageInfo.hasNextPage) {
            pageNum = this.pageInfo.nextPage;
          }
          break;
        case "end":
          pageNum = this.pageInfo.pages;
          break;
      }
      this.selectComment(pageNum,this.pageSize);
    },
  },
  beforeDestroy(){
    this.$bus.$off('commentListRefresh')
  }
};
</script>

<style>
</style>